<template>
    <div class="box_cont topic_cont flex flex-column justify-between" ref="boxfull" v-loading="loading">
        <div class="w-full flex_center_center">
            <h5>21天抗遗忘</h5>
        </div>
        <div class="work_cont">
            <div class="item cur transition" :class="{active: item == time}" v-for="item in listData" @click="chooseTime(item)" :key="item.id">{{ item }}</div>
            <div class="item1"></div>
            <div class="item1"></div>
            <div class="item1"></div>
            <div class="item1"></div>
            <div class="item1"></div>
        </div>
        <div class="flex_c_c">
            <el-button id="fullscreen_button" type="warning" @click="perNextStep">上一步</el-button>
            <el-button id="fullscreen_button" type="primary" @click="confrimSubmit" :loading="saveLoading">确认提交</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        saveLoading: {type: Boolean, default: false},
    },
    data() {
        return {
            loading: false,
            listData: [],
            time: '',
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        initData() {
            for(let i=0;i<38;i++){
                let hour = parseInt(i/2) + 5
                let minute = i % 2 * 30
                if(hour < 10){
                    hour = '0' + hour
                }
                if(minute < 10){
                    minute = '0' + minute
                }
                this.listData.push(hour + ':' + minute)
            }
        },
        chooseTime(time) {
            this.time = time
        },
        perNextStep() {
            this.$emit('perNextStep')
        },
        // 提交
        confrimSubmit() {
            if (!this.time) {
                this.$message.error('请选择抗遗忘时间')
                return false
            }
            this.$emit('submitCycelFn', this.time)
        },
    }
}
</script>

<style lang="scss" scoped>

.active{
    background: #F69B2C !important;
    color: #fff !important;
}

#fullscreen_button{width: 209px;margin: 2.4rem 1rem}

.topic_cont{
    text-align: center;
    padding: 2rem 0 0 !important;
    h5{
        font-size: 3.2rem;
        color: #1A1A1A;
        font-weight: normal;
    }
}
.work_cont{
    width: 100%;
    height: 80%;
    overflow-y: scroll;
    box-sizing: border-box;
    // margin-top: 20px;
    padding: 2rem 9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 2px solid #F7F8FA;
    .item{
        min-width: 20rem;
        height: 8.4rem;
        text-align: center;
        line-height: 8.4rem;
        text-align: center;
        background: #F7F8FA;
        border-radius: 10px;
        margin-bottom: 3rem;
        color: #1A1A1A;
        font-size:3rem;
        
        &:hover{
            background: #F69B2C;
            color:#FFF;
            img{
                content: url(@/assets/img/collect_2.png);
            }
        }
    }
    .item1{
        min-width: 20rem;
        height: 8.4rem;
    }
    .status{
        background: #F69B2C;
        color: #fff;
    }

    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }

}
.back_img{
    width: 4rem;
    height: 4rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
}
</style>